<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <SearchBar :show-search="true">
      <template slot="peopleSearch">
        <el-form-item label="策略搜索：">
          <el-row type="flex">
            <el-col>
              <el-input v-model="searchName" placeholder="请输入" style="width: 300px;" />
            </el-col>
            <el-col>
              <el-button type="primary" class="CXButton" @click="searchPolice"><i class="el-icon-search" /> 查询</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </template>
    </SearchBar>
    <!-- 新增 -->
    <el-card v-loading="loading">
      <!-- 新增按钮 -->
      <el-row>
        <el-col>
          <el-button type="warning" @click="showDialog=true">
            <i class="el-icon-circle-plus-outline" /> 新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格表单 -->
      <el-row>
        <el-table
          :data=" tableData"
          stripe
          style="width: 100%;padding-top: 20px; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="policyName"
            label="策略名称"
            width="180"
          />
          <el-table-column
            prop="discount"
            label="策略方案"
          />
          <el-table-column
            prop="updateTime"
            label="创建日期"
          >
            <template v-slot="{row}">
              {{ row.updateTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="160"
          >
            <template v-slot="scope">
              <el-button type="text" size="small" @click="viewDetails(scope.row.policyId,scope.row.policyName)">查看详情</el-button>
              <el-button type="text" size="small" @click="editPolicy(scope.row.policyId)">修改</el-button>
              <el-button type="text" size="small" style="color: red;" @click="delPolicy(scope.row.policyId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <AddPolicy ref="AddPolicy" :show-dialog="showDialog" @closeDialog="closeDialog" @getPolicyList="getPolicyList" />
    <!-- 查看详情 -->
    <ViewDetails ref="ViewDetails" :view-detail-dialog="viewDetailDialog" :view-detail-id="viewDetailId" :policy-name="policyName" @closeViewDetailDialog="closeViewDetailDialog" @viewDetails="viewDetails" />
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import AddPolicy from './components/add-policy.vue'
import ViewDetails from './components/view-details.vue'
import { getPolicyListAPI, deletePoliceAPI, searchPoliceAPI } from '@/api/policy'
export default {
  components: {
    SearchBar,
    AddPolicy,
    ViewDetails

  },
  data() {
    return {
      // 表格数据
      tableData: [],
      total: 0,
      // 页数
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      loading: false,
      // 开启模态框
      showDialog: false,
      // 搜索数据
      searchName: '',
      // 查看详情弹窗
      viewDetailDialog: false,
      viewDetailId: '',
      policyName: ''
    }
  },
  created() {
    this.getPolicyList()
  },
  methods: {
    // 获取人员列表
    async  getPolicyList() {
      this.loading = true
      const res = await getPolicyListAPI(this.pageConfig)
      this.tableData = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      this.total = +res.data.totalCount
      this.loading = false
    },
    // 页码改变触发
    currentChange(newPage) {
      // 设置最新页码参数
      this.pageConfig.pageIndex = newPage
      // 重新获取数据列表，并展示第newPage页面的数据列表中的内容
      this.getPolicyList()
    },
    // 关闭模态框
    closeDialog() {
      this.showDialog = false
    },
    // 删除角色
    async   delPolicy(id) {
      try {
        await this.$confirm('确定是否删除该策略')
        await deletePoliceAPI(id)
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.pageConfig.pageIndex > 1) {
          this.pageConfig.pageIndex--
        }
        this.getPolicyList()
      } catch (error) {
        this.$message.info('已取消删除')
      }
    },

    // 修改角色回填数据
    async  editPolicy(id) {
      // 调用子组件DOM的获取详情方法，传入id
      this.$refs.AddPolicy.policyDetail(id)
      this.showDialog = true
    },

    // 查看详情按钮
    viewDetails(id, policyName) {
      this.viewDetailId = id
      this.policyName = policyName
      this.$refs.ViewDetails.ViewDetails(id)
      this.viewDetailDialog = true
    },
    // 关闭查看详情弹窗
    closeViewDetailDialog() {
      this.viewDetailDialog = false
    },
    // 搜索人员信息
    async  searchPolice() {
      if (this.searchName) {
        const res = await searchPoliceAPI(this.searchName)
        console.log(res)
        this.tableData = res.data.currentPageRecords.map((item, index) => {
          return {
            ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
          }
        })
      } else {
        this.getPolicyList()
      }
    }
  }

}
</script >

<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}
.el-table__header {
  background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar {
      width: 80px;
      height: 80px;
      display: block;
    }
  }
 ::v-deep .el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    line-height: 80px;
  }

::v-deep .el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 400px;
}
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .TwoButton {
    text-align: center;
  }

</style>
